<template>
    <div class="container home-container">
        <div class="inner">
            <Row :gutter="gutter">
                <Col span="15">
                    <Card class="common-card" shadow>
                        <p slot="title" class="card-title">党员基本资料</p>
                        <div slot="extra">
                            <router-link to="/userinfo">
                                <span class="card-more">查看</span>
                            </router-link>
                        </div>
                        <div class="userBox" v-if="userInfo">
                            <div class="userInfo">
                                <p class="userItem">
                                    <label>姓名</label>
                                    <span>{{ userInfo.name }}</span>
                                </p>
                                <p class="userItem">
                                    <label>党员人数</label>
                                    <span>{{ userInfo.count }}</span>
                                </p>
                            </div>
                            <div class="userInfo">
                                <p class="userItem">
                                    <label>上级组织</label>
                                    <span>{{ userInfo.department.fdeptName }}</span>
                                </p>
                                <p class="userItem">
                                    <label style="padding: 0 10px;">所属党组织</label>
                                    <span>{{ userInfo.department.deptName }}</span>
                                </p>
                            </div>
                            <div class="userInfo">
                                <p class="userItem">
                                    <label style="padding:0 10px;">机关党委领导人</label>
                                    <span>{{ userInfo.department.clerkName }}</span>
                                </p>
                            </div>
                        </div>
                    </Card>
                </Col>
                <Col span="9">
                    <Card class="common-card" shadow>
                        <p slot="title" class="card-title">操作中心</p>
                        <div class="statistics_box">
                        <div class="statistics">
                            <router-link to="/notice/list">
                            <div class="statistics_num">
                                <span class="num">{{ unreadNotice }}</span>
                            </div>
                            </router-link>
                            <p>未读公告</p>
                        </div>
                        <div class="statistics statistics_jb">
                            <router-link to="/bulletin/list">
                            <div class="statistics_num">
                                <span class="num">{{unreadBulletin}}</span>
                            </div>
                            </router-link>
                            <p>未读简报</p>
                        </div>
                        </div>
                    </Card>
                </Col>
            </Row>
            <Row :gutter="gutter">
                <Col span="12">
                    <Card class="common-card" shadow>
                        <p slot="title" class="card-title">公告</p>
                        <div slot="extra">
                            <router-link to="/notice/list">
                                <span class="card-more">查看</span>
                            </router-link>
                        </div>

                        <ul class="common-list" v-if="noticeList.length">
                            <li v-for="item in noticeList" :key="item.id" class="list-item" @click="gotoDetail('notice', item)">
                                <p class="list-title">
                                    {{ item.title }}
                                    <Tag :color="!item.readFlag ? '#fc615f' : 'grey'">{{ item.readFlag ? '已读' : '未读' }}</Tag>
                                </p>
                                <p class="list-desc">
                                    <span>{{ item.createTime | formatDate('YYYY-MM-DD') }}</span>
                                    <span>{{ item.sendUserDeptName || item.sendUserName }}发</span>
                                </p>
                            </li>
                        </ul>
                        <div class="no-data" v-else>
                            暂无数据
                        </div>
                    </Card>
                </Col>
                <Col span="12">
                    <Card class="common-card" shadow>
                        <p slot="title" class="card-title">简报</p>
                        <div slot="extra">
                            <router-link to="/bulletin/list">
                                <span class="card-more">查看</span>
                            </router-link>
                        </div>

                        <ul class="common-list" v-if="bulletinList.length">
                            <li v-for="item in bulletinList" :key="item.id" class="list-item" @click="gotoDetail('bulletin', item)">
                                <p class="list-title">
                                    {{ item.title }}
                                    <Tag :color="!item.readFlag ? '#fc615f' : 'grey'">{{ item.readFlag ? '已读' : '未读' }}</Tag>
                                </p>
                                <p class="list-desc">
                                    <span>{{ item.createTime | formatDate('YYYY-MM-DD') }}</span>
                                    <span v-show="item.sendUserDeptName">{{ item.sendUserDeptName || item.sendUserName }}发</span>
                                </p>
                            </li>
                        </ul>
                        <div class="no-data" v-else>
                            暂无数据
                        </div>
                    </Card>
                </Col>
            </Row>
        </div>
    </div>
</template>

<script>
import { userView, getUnreadNumRest, getUnreadListRest } from '@/common/apis/system'

export default {
    name: "home",
    components: {},
    data() {
        return {
            userInfo: null,
            noticeList: [],
            bulletinList: [],
            unreadNotice: 0,
            unreadBulletin: 0,
            gutter: 16
        }
    },
    mounted() {
        this.initData()
    },
    methods: {
        initData() {
            getUnreadNumRest().then(result => {
                if(result.data.code === 200) {
                    this.unreadNotice = result.data.content[1]
                    this.unreadBulletin = result.data.content[2]
                }
            })
           
            getUnreadListRest().then(result => {
                if(result.data.code === 200) {
                    this.noticeList = result.data.content[1]
                    this.bulletinList = result.data.content[2]
                }
            })
            
            userView().then(result => {
                if(result.data.code === 200) {
                    const data = result.data.content
                    this.userInfo = data
                }
            })
        },
        gotoDetail(type, record) {
            this.$router.push({
                path: '/' + type + '/detail/' + record.id
            })
        }
    }
}
</script>
<style lang="less" scoped>
.userBox{
  .userInfo{
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    .userItem{
        width:50%;
    }
    label{
      background: #e4e4e4;
      display: inline-block;
      width: 118px;
      height: 29px;
      line-height: 29px;
      text-align: center;
      border-radius: 4px;
      text-align-last: justify;
      padding: 0 18px;
      margin-right: 15px;
    }
    span{
      display:inline-block;
    //   width: 45px;
    }
    .userItem:last-child{
      margin-right:10px;
    }
  }
}
.statistics_box{
  display: flex;
    justify-content: space-around;
    margin-top: 20px;
  .statistics{
    .statistics_num{
      width: 105px;
      height: 105px;
      display: inline-block;
      background: #e32322;
      border: 10px solid #f6d3d1;
      line-height: 82px;
      color: #fff;
      font-size: 14px;
      text-align: center;
      border-radius: 50%;
      .num{
        font-size: 25px;
      }
    }
  }
  .statistics_jb{
      .statistics_num{
        background: #00a7ae;
        border: 10px solid #ccebed;
      }
  }
  p{
    width: 105px;
    text-align: center;
    margin-top: 16px;
    font-size: 15px;
  }
}
</style>